<!-- eslint-disable vue/valid-v-bind -->
<template>
  <div class="app-container">
    <div style="background-color: #fff; padding: 30px 30px 30px 0;margin-bottom: 16px; border-radius:  10px;">
      <el-row :gutter="20">
        <el-col :span="2" style="display: flex; justify-content: end;">
          <el-avatar shape="square" :size="50" :style="style">{{ info.PerInitial }}</el-avatar>
        </el-col>
        <el-col :span="22">
          <div style="margin-bottom: 25px;">
            <span style="margin-right: 20px;color: #404040;font-size: 20px;font-weight: 600"> {{ info.PerName }}</span>
            <span style="color: #cfcfcf">{{ info.PerDistFullName }}</span>
          </div>
          <el-descriptions :column="4">
            <el-descriptions-item label="性别" :label-style="{'color': '#CFCFCF'}">{{ info.PerSex }}</el-descriptions-item>
            <el-descriptions-item label="籍贯" :label-style="{'color': '#CFCFCF'}"> {{ info.PerNativePlace }}</el-descriptions-item>
            <el-descriptions-item label="出生日期" :label-style="{'color': '#CFCFCF'}"> {{ info.PerBirthYear + '.' + info.PerBirthMonth + '.' + info.PerBirthDay }}</el-descriptions-item>
            <el-descriptions-item label="身份证号" :label-style="{'color': '#CFCFCF'}"> {{ info.PerCard }}</el-descriptions-item>
            <el-descriptions-item label="毕业院校" :label-style="{'color': '#CFCFCF'}"> {{ info.PerGraduationSchool }}</el-descriptions-item>
            <el-descriptions-item label="学历" :label-style="{'color': '#CFCFCF'}"> {{ info.PerEducation }}</el-descriptions-item>
            <el-descriptions-item label="专业" :label-style="{'color': '#CFCFCF'}"> {{ info.PerMajor }}</el-descriptions-item>
            <el-descriptions-item label="联系电话" :label-style="{'color': '#CFCFCF'}"> {{ info.PerMobile }}</el-descriptions-item>
            <el-descriptions-item label="注册证书所在单位" :label-style="{'color': '#CFCFCF'}">
              <div v-for="(item,index) in info.ComNames">
                <router-link :to="{path: '/retrievalNumber/info?id=' + item.ComId}">
                <span style="color: #0087FE">{{ item.ComName }}</span>
              </router-link>
              </div>
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
    </div>
    <div style="background-color: #fff; margin-bottom: 16px; border-radius:  10px;">
      <sub-nav-tabs :tabs-list="tabsList" :active-name="activeName" :person-id="personId" @getActiveSubNameEmit="getActiveSubNameEmit" />
    </div>
  </div>
</template>
<script>
import SubNavTabs from '@/views/talentPerson/info/components/subNavTabs.vue'
import { extractColorByName } from '@/utils'
import { getPerDetail } from '@/api/person'
export default {
  name: 'Info',
  components: { SubNavTabs },
  data() {
    return {
      activeName: '注册信息',
      tabsList: [
        { component: 'BasicInfos', name: '注册信息' },
        { component: 'Certificate', name: '职称证书' },
        { component: 'Project', name: '个人工程业绩' }
      ],
      info: {},
      personId: '',
      style: {
        backgroundColor: '',
        fontSize: '2.2rem'
      }
    }
  },
  created() {
    this.personId = this.$route.query.id
    if (!this.personId) {
      this.$router.replace({
        path: '/talentPerson'
      })
    }

    this.getInfo(this.personId)
  },
  methods: {
    // 1
    async getInfo(personId) {
      this.loading = true
      await getPerDetail({ personId: personId }).then((res) => {
        this.loading = false
        if (res.code === 200) {
          this.info = res.data.PerDetail
          this.style.backgroundColor = extractColorByName(this.info.PerName)
        }
      })
    },
    // 2  tabs
    getActiveSubNameEmit(v) {
      this.activeName = v.label
    }
  }
}
</script>
<style lang="scss" scoped>
.card-box{
  background-color: #fff;
  padding: 20px;
  margin: 20px 20px 20px 0;
  border-radius:  5px;
}
.infinite-list {
    height: 760px;
    padding: 0;
    margin: 0;
    list-style: none;
}
.infinite-list-item{
  border: 1px solid #E8E8E8;
  margin-bottom: 20px;
  padding: 20px;
  border-radius:  5px;
}
 .card-title{
  font-size: 20px;
  color: #404040;
  margin-bottom: 10px;
  font-weight: 600
}
 .card-content{
  font-size: 13px;
  color: #6d6d6d;
  margin-bottom: 20px;
  border-bottom: 1px solid #E8E8E8;
}
.card-foot{
  color: #6D6D6D;
  font-size: 10px;
  display: flex;
  align-items: center;
}
</style>
